<template>
	<div>
		<h1>新用户注册</h1>
		
		<p>很高兴您将成为商城的会员（注册只需一步）</p>
		
		<van-field
		  v-model="username"
		  name="用户名"
		  label="手机号"
		  placeholder="手机号"
		  :rules="[{ required: true, message: '请填写用户名' },{pattern : /^1[3456789]\d{9}$/,message:'请输入正确的手机号'}]"
		/>
		<van-field
		  v-model="password"
		  type="password"
		  name="密码"
		  label="密码"
		  placeholder="密码"
		  :rules="[{ required: true, message: '请填写密码' },{pattern : /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/,message:'请输入正确的密码'}]"
		/>
		  <van-field
		    v-model="password"
		    type="password"
		    name="密码"
		    label="确认密码"
		    placeholder="密码"
		    :rules="[{ required: true, message: '请填写密码' },{pattern : /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/,message:'请输入正确的密码'}]"
		  />
		  <van-field
		    v-model="username"
		    name="用户名"
		    label="用户名"
		    placeholder="用户名"
		    :rules="[{ required: true, message: '请填写用户名' },{pattern : /^1[3456789]\d{9}$/,message:'请输入正确的手机号'}]"
		  />
		  <div style="margin: 16px;">
		      <van-button round block type="info" native-type="submit">
		        注册
		      </van-button>
		    </div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				username : '',
				password : ''
			}
		}
	}
</script>

<style scoped>
	
</style>
